<template>
  <div>
    <a-layout id="components-layout-demo-top-side">
      <a-layout-header class="header">
        <div class="logo" />
        <a-menu
          theme="dark"
          mode="horizontal"
          :default-selected-keys="['/order']"
          @select="menuchange"
          :style="{ lineHeight: '64px', position: 'relative' }"
        >
          <a-menu-item key="/order"> 订单管理 </a-menu-item>
          <a-menu-item key="/room"> 客房管理 </a-menu-item>
          <a-menu-item key="/person"> 用户管理 </a-menu-item>
          <a-button
            type="primary"
            @click="logOut"
            style="
              position: absolute;
              right: 32px;
              top: 32px;
              transform: translateY(-50%);
            "
            >退出
          </a-button>
        </a-menu>
      </a-layout-header>

      <a-layout-content>
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </div>
</template>
<script>
// import "ant-design-vue/dist/antd.css";
export default {
  data() {
    return {
      nowPath: "/" + this.$route.path.split("/")[1],
    };
  },
  methods: {
    logOut() {
      localStorage.clear();
      this.$router.push("/admin");
    },
    menuchange(event) {
      let paths = "";
      switch (event.key.split("/")[1]) {
        default:
          paths = "order";
          break;
        case "room":
          paths = "room";
          break;
        case "person":
          paths = "person";
          break;
      }
      this.$router.push({ name: paths });
    },
  },

  mounted() {
    const loginStatus = localStorage.getItem("loginStatus");

    if (loginStatus != "1") {
      this.$router.push("/admin");
    }
  },
};
</script>

<style>
#components-layout-demo-top-side .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>
